<template>
  <div>
    <el-dropdown @command="handleCommand">
      <span class="avatar-dropdown">
        <!--<el-avatar class="user-avatar" :src="avatar"></el-avatar>-->
        <img class="user-avatar" :src="avatar" alt="" />
        <div class="user-name">
          {{ username }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </div>
      </span>

      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="personalModal">
          {{ $t('user.personInformation') /*'个人资料'*/ }}
        </el-dropdown-item>
        <el-dropdown-item command="resignPsw" divided>
          {{ $t('user.changePassword') /*'修改密码'*/ }}
        </el-dropdown-item>
        <!-- <el-dropdown-item command="github">github地址</el-dropdown-item>
      <el-dropdown-item command="gitee" divided>码云地址</el-dropdown-item>
      <el-dropdown-item command="pro" divided>pro付费版地址</el-dropdown-item>
      <el-dropdown-item command="plus" divided>plus付费版地址</el-dropdown-item> -->
        <el-dropdown-item command="logout" divided>
          {{ $t('user.loginOut') /*'退出登录'*/ }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <vab-person-msg
      ref="VabPersonMsg"
      url="/upload"
      name="userinfo"
      :userinfo="userinfo"
      :limit="50"
      :size="2"
    ></vab-person-msg>
    <vab-password
      ref="VabPassword"
      url="/upload"
      name="file"
      :limit="50"
      :size="2"
    ></vab-password>
  </div>
</template>

<script>
  import VabPassword from '@/components/VabPassword'
  import VabPersonMsg from '@/components/VabPersonMsg'
  import { recordRoute } from '@/config'
  import { mapGetters, mapState } from 'vuex'
  export default {
    name: 'VabAvatar',
    components: {
      VabPersonMsg,
      VabPassword,
    },
    computed: {
      ...mapGetters({
        avatar: 'user/avatar',
        username: 'user/username',
        // userinfo: 'user/userinfo',
      }),
      ...mapState({
        userinfo: (state) =>
          state.user.userinfo || JSON.parse(localStorage.getItem('userinfo')),
      }),
    },
    methods: {
      handleCommand(command) {
        switch (command) {
          case 'logout':
            this.logout()
            break
          case 'personalCenter':
            this.personalCenter()
            break
          case 'personalModal':
            this.personalModal({ key: 'value' })
            break
          case 'resignPsw':
            this.resignPsw({ key: 'value' })
            break
          case 'github':
            window.open('https://github.com/chuzhixin/vue-admin-beautiful')
            break
          case 'gitee':
            window.open('https://gitee.com/chu1204505056/vue-admin-beautiful')
            break
          case 'pro':
            window.open(
              'https://vue-admin-beautiful.com/admin-pro/?hmsr=homeAd&hmpl=&hmcu=&hmkw=&hmci='
            )
            break
          case 'plus':
            window.open(
              'https://vue-admin-beautiful.com/admin-plus/?hmsr=homeAd&hmpl=&hmcu=&hmkw=&hmci='
            )
        }
      },
      personalModal(data) {
        this.$refs['VabPersonMsg'].handleShow(data)
      },
      resignPsw(data) {
        this.$refs['VabPassword'].handleShow(data)
      },
      personalCenter() {
        this.$router.push('/personalCenter/personalCenter')
      },
      logout() {
        this.$baseConfirm(
          `${this.$t('common.isSureLoginOut') /*'您确定要退出'*/}` +
            this.$baseTitle +
            `${this.$t('common.ma') /*'吗？'*/}`,
          null,
          async () => {
            await this.$store.dispatch('user/logout')
            if (recordRoute) {
              const fullPath = this.$route.fullPath
              this.$router.push(`/login?redirect=${fullPath}`)
            } else {
              this.$router.push('/login')
            }
          }
        )
      },
    },
  }
</script>
<style lang="scss" scoped>
  .avatar-dropdown {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;
    height: 50px;
    padding: 0;

    .user-avatar {
      width: 40px;
      height: 40px;
      cursor: pointer;
      border-radius: 50%;
    }

    .user-name {
      position: relative;
      margin-left: 5px;
      margin-left: 5px;
      cursor: pointer;
    }
  }
</style>
